<template>
	<view>
		<app-tabs type="2" :list="tabsList" @change="tabsChange" />
		<view class="list">
			<view class="item" v-for="(item ,index) in list" :key="index">
				<image class="img" :src="item.url"></image>
				<view class="text" @click="goDetail(item.id)">
					<view>名称:{{item.yhjmc}}</view>
					<view>有效期:{{item.kssj.slice(0,10)}}至{{item.jssj.slice(0,10)}}</view>
					<view v-if="item.zt === 0">状态:未使用</view>
					<view v-if="item.zt === 1">状态:已使用</view>
					<view v-if="item.zt === 2">状态:过期</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import AppTabs from '@/components/app-tabs';
	export default {
		components: {
			AppTabs
		},
		data() {
			return {
				tabsList: ['未使用', '已使用'],
				list: []
			}
		},
		onLoad() {
			this.getList(0);

		},
		methods: {
			getList(type) {
				console.log(type)
				//0 已使用 1未使用
				if (type == 1) {
					this.$http.post('/app/pay/getYyYhj', {
						page: 1,
						limit: 999,
					}).then(res => {
						console.log(res)
						this.list = res.data.records
					})
				} else {
					this.$http.post('/app/pay/getWyYhj', {
						page: 1,
						limit: 999,
					}).then(res => {
						
						console.log(res)
						this.list = res.data.records
					})

				}

			},
			/**
			 * tabs 切换
			 */
			tabsChange(e) {
				this.getList(e)
			},
			/**
			 * 卡卷详情
			 */

			goDetail(e) {
				uni.navigateTo({
					url: '/pages/card/detail?id=' + e
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.list {
		width: 100vw;
		display: flex;
		flex-direction: column;
		align-items: center;

		.item {
			margin: 14rpx 0;
			width: 700rpx;
			position: relative;

			box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1), 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
			padding: 20rpx;

			box-sizing: border-box;

			/* 	height: 332rpx; */
			background: #fff;
			border-radius: 20rpx;
			display: flex;

			.img {

				width: 180rpx;
				height: 180rpx;
				border-radius: 20rpx;
			}

			.text {
				margin-top: 30rpx;
				margin-left: 20rpx;
				color: #333;

				// position: relative;
				// top: -155rpx;
				// left: 190rpx;
			}
		}
	}
</style>